<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 企业数据
 *
 * @type {UnwrapNestedRefs<{form: {businessEmail: string, businessUpdateTime: string, businessSex: string, businessName: string, businessIntroduction: string, businessUpdateMan: string, businessRoomName: string, businessCreateMan: string, businessNo: string, businessAge: number, businessPhone: string, businessCountNumber: string, businessOrderClassHeadName: string, businessRoomNo: string, businessCreateTime: string}}>}
 */
const businessData = reactive({
    form: {
        businessNo: '',
        businessName: '',
        businessAge: 0,
        businessSex: '',
        businessIntroduction: '',
        businessOrderClassHeadName: '',
        businessRoomNo: '',
        businessRoomName: '',
        businessPhone: '',
        businessEmail: '',
        businessCreateMan: '',
        businessCreateTime: '',
        businessUpdateMan: '',
        businessUpdateTime: '',
        businessCountNumber: '',
    }
})

/**
 * 企业数据
 *
 * @type {UnwrapNestedRefs<{form: {businessEmail: string, businessSex: string, businessNo: string, businessName: string, businessAge: number, businessIntroduction: string, businessPhone: string, businessOrderClassHeadName: string}}>}
 */
const businessNewData = reactive({
    form: {
        businessNo: '',
        businessName: '',
        businessAge: 0,
        businessSex: '',
        businessIntroduction: '',
        businessOrderClassHeadName: '',
        businessPhone: '',
        businessEmail: '',
    }
})

/**
 * 加载个人信息
 */
const loadBusiness = () => {
    request.get(`/api/business/business-info/${account.accountNo}`).then(res => {
        if (res.code === "200") {
            if (res.data === null) {
                businessData.form = {}
            } else {
                businessData.form = res.data
            }
        }
    })
}
loadBusiness()

/**
 * 更新个人信息
 */
const updateInfo = () => {
    if (account.accountRoleName === 'visitor-business') {
        ElMessage.info("游客-企业仅可以查看信息")
    } else {
        businessNewData.form.businessNo = businessData.form.businessNo
        businessNewData.form.businessName = businessData.form.businessName
        businessNewData.form.businessAge = businessData.form.businessAge
        businessNewData.form.businessPhone = businessData.form.businessPhone
        businessNewData.form.businessEmail = businessData.form.businessEmail
        businessNewData.form.businessIntroduction = businessData.form.businessIntroduction
        businessNewData.form.businessOrderClassHeadName = businessData.form.businessOrderClassHeadName
        if (businessData.form.businessSex === "男") {
            businessNewData.form.businessSex = 1
        } else {
            businessNewData.form.businessSex = 0
        }
        request.put(`/api/business/update-info`, businessNewData.form).then(res => {
            if (res.code === "200") {
                loadBusiness()
                ElMessage.success("修改成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 上传成功
 *
 * @param res 头像
 */
const uploadSuccess = (res) => {
    ElMessage.success("上传成功")
    account.accountPhoto = res.data
}

/**
 * 获取账号
 */
const getAccountNo = () => {
    if (account.accountRoleName === 'visitor-business') {
        ElMessage.info("游客-企业仅可以查看信息")
    } else {
        request.get(`/files/get-account-no/${account.accountNo}`)
    }
}
</script>

<template>
    <div>
        <div class="card" style="width: 50%; padding: 40px;">
            <el-form :model="businessData.form" label-width="100px" label-position="center"
                     style="padding-right: 40px">
                <el-form-item label="头像">
                    <el-image style="width: 150px; height: 150px" :src="account.accountPhoto"/>
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9090/files/upload"
                            :show-file-list="false"
                            list-type="picture"
                            :on-success="uploadSuccess">
                        <div style="margin-top: 220px; margin-left: -200px"
                             v-if="account.accountRoleName === 'common-business'">
                            <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                        </div>
                    </el-upload>
                    <div style="margin-top: 220px; margin-left: -150px"
                         v-if="account.accountRoleName === 'visitor-business'">
                        <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="企业号" prop="businessNo">
                    <el-input style="width: 400px" v-model="businessData.form.businessNo" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="企业名" prop="businessName">
                    <el-input v-model="businessData.form.businessName" autocomplete="off"/>
                </el-form-item>
                <el-form-item>
                    <el-input
                            v-model="businessData.form.businessIntroduction"
                            :autosize="{ minRows: 4, maxRows: 8 }"
                            type="textarea"
                            placeholder="字数不得超过500字"
                            :maxlength="500"
                    />
                </el-form-item>
                <el-form-item label="订单班负责人" prop="businessOrderClassHeadName">
                    <el-input v-model="businessData.form.businessOrderClassHeadName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="年龄" prop="businessAge">
                    <el-input v-model="businessData.form.businessAge" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="businessData.form.businessSex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="businessPhone">
                    <el-input v-model="businessData.form.businessPhone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="邮箱" prop="businessEmail">
                    <el-input v-model="businessData.form.businessEmail" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button @click="updateInfo" type="primary"
                           style="margin-bottom: 10px;margin-left: 350px">修改信息
                </el-button>
            </div>
        </div>
        <div class="card" style="margin-top: 10px;width: 50%;padding: 40px;">
            <el-form :model="businessData.form" label-width="100px" label-position="center" style="padding-right: 40px">
                <el-form-item label="办公室" prop="businessRoomName">
                    <el-input v-model="businessData.form.businessRoomName" autocomplete="off" disabled/>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>

</style>